<!-- HERO -->
<div class="container">
    <div class="row"
         style="padding: 4rem 2.5rem 0 !important; background-color: #fff !important;">
        <div class="col-lg-12 d-flex flex-column align-items-center">
            <h1 class="text-center text-uppercase"
                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bolder !important; font-size: 2.5rem !important; color: #212121;">
                Code Backend Theme <sup>
            </h1>
            <p class="my-1 text-center text-uppercase"
               style="letter-spacing: 4px !important; color: #74788D !important;">
                Minimalist and Elegant Backend
                Theme for Odoo 16</p>
        </div>
        <div class="col-lg-12 d-flex justify-content-center align-items-center"
             style="margin: 2rem 0;">
            <img src="./assets/hero.png" width="100%" height="auto"
                 class="img-responsive">
        </div>
    </div>
</div>
<!-- END OF HERO -->

<!-- OVERVIEW -->
<div class="container">
    <div class="row"
         style="padding: 0rem 2.5rem !important; background-color: #fff !important;">
        <div class="col-lg-12 d-flex flex-column justify-content-center">
            <p class="my-1 text-center"
               style="font-family: Montserrat, 'sans-serif' !important; color: #212121 !important;">
                The Code Backend Theme V16 Gives You a Fully Modified View with
                a Full Screen Display.
                This is a Minimalist and Elegant Backend Theme for Odoo 16.
                This Theme Will Change Your Old Experience to a New Experience
                With Odoo.
                It is a Perfect Choice for Your Odoo Backend and an Attractive
                Theme for Your Odoo 16.
                It will Give You a Clean Layout with a New Color Combination and
                a Modified Font. It has a
                Sidebar with
                New App Icons and Company Logo. This Will Change Your Old
                Kanban, List and Form Views to A Fully
                Modified View.
            </p>
        </div>
        <div class="col-lg-12 mt-4">
            <div class="alert alert-warning text-center" role="alert">
                <i class="fa fa-exclamation-triangle mr-2"
                   aria-hidden="true"></i>Please make sure that you install
                all
                your apps prior to the installation of this theme.
            </div>
        </div>
    </div>
</div>
<!-- END OF OVERVIEW-->
<!--DOWNLOAD BUTTON ENTERPRISE-->
<div>
    <div class="col-lg-12 text-center mt-5">
        <a href="https://apps.odoo.com/apps/themes/14.0/code_backend_theme_enterprise/"
           style="background-color:#556EE6 !important; color:#fff !important; font-weight:600 !important; padding:10px 15px 13px !important; margin:0 5px !important; border-radius:5px !important">
            <i class="fa fa-download mr-1"></i>Download Code Backend Theme for Enterprise
        </a>
        <br/>
    </div>
</div>


<!-- FEATURE -->
<div class="container" style="margin-top: 3rem;">
    <div class="row">
        <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">

            <h2
                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
                Features</h2>
        </div>
    </div>
    <!-- RESPONSIVE -->
    <div class="container" style="margin-top: 3rem;">
        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/responsive.jpg" width="100%" height="auto"
                     class="img-responsive">
            </div>
            <div class="row">
                <div class="col-lg-4 d-flex justify-content-center align-items-center"
                     style="padding: 1.5rem !important; margin: 0rem 0rem 3rem !important;">
                    <img src="assets/resp-gif.gif" width="80%" height="auto"
                         class="img-responsive rounded">
                </div>
                <div class="col-lg-8" style="padding: 2.5rem 1.5rem!important;">
                    <div class="text-center"
                         style="font-size: 0.9rem !important; background-color: #556EE6 !important; padding: 0.5 1.5rem !important; width: 60px; color: #ffffff !important; font-weight: 700; border-radius: 0.2rem !important; margin: 10px 0 !important;">
                        New
                    </div>
                    <h3 style="font-weight: 700 !important;">Fully Responsive
                        Layout</h3>
                    <h6
                            style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
                        Now take advantage of everything your dashboard has to
                        offer even on the go. Our design are
                        now
                        fully responsive enabling you to view and manage
                        everything from the comfort of your mobile
                        device. Everything
                        has been designed in a meticulous fashion so that every
                        view snaps itself to fit the size of
                        the
                        device you are using, be it smartphones, tablet or any
                        other portables, our theme adjusts
                        itself
                        to fit the screen size.
                    </h6>
                    <span class="d-flex" style="margin-top: 2rem !important;">
                        <i class="fa fa-check-square mr-2"
                           style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                        <p>Fully responsive</p>
                    </span>

                    <span class="d-flex">
                        <i class="fa fa-check-square mr-2"
                           style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                        <p>Fly-out hamburger menu on the left</p>
                    </span>

                    <span class="d-flex">
                        <i class="fa fa-check-square mr-2"
                           style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                        <p>Fits perfectly to all screen sizes</p>
                    </span>

                    <span class="d-flex">
                        <i class="fa fa-check-square mr-2"
                           style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                        <p>Quick access menu at the bottom in discuss</p>
                    </span>

                </div>
            </div>

        </div>
    </div>
    <!-- END OF RESPONSIVE -->
    <!-- FEATURE -->
    <div class="container" style="margin-top: 3rem;">
        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
                <h3 style="font-weight: 700 !important;">Kanban Group View</h3>
                <h6
                        style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
                    The Code Backend Theme V16 Gives You a Fully Modified Kanban
                    View and Kanban Group View.
                    The Section Wise Separated Stages give a Pleasant Experience
                    And an Extraordinary Design
                    To Your Content Tiles Making The Tiles Look Great.
                    It will Give You a Clean Layout with the New Color
                    Combination and a Modified Font.
                </h6>
                <div class="row mt-4">
                    <div class="col-lg-6">
                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>Modified Font</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>New Color Combination</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>Full Screen View</p>
                        </span>
                    </div>

                    <div class="col-lg-6">
                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>Stages are Separated in View</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>Clean Layout</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>Buttons with New Colors</p>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/kanabangroupview.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>
    </div>
    <!-- END OF FEATURE -->

    <!-- FEATURE -->
    <div class="container" style="margin-top: 3rem;">
        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
                <h3 style="font-weight: 700 !important;">List View</h3>
                <h6
                        style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
                    The All new Code Backend Theme V16 Gives You The Fully
                    Modified List View and This Table Design
                    is Also Have Awesome Design and it Gives You More Beauty for
                    Your Odoo Backend.
                    It will Give You a Clean Layout with the New Color
                    Combination and a Modified Font.
                </h6>
                <div class="row mt-4">
                    <div class="col-lg-6">
                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>Modified Table Style</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>New Color Combination</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>New Scroll Bar</p>
                        </span>
                    </div>

                    <div class="col-lg-6">
                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>New Status Tag</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>New Scrollbar</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>Buttons with New Colors</p>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/listview.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>
    </div>
    <!-- END OF FEATURE -->

    <!-- FEATURE -->
    <div class="container" style="margin-top: 3rem;">
        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
                <h3 style="font-weight: 700 !important;">Form View</h3>
                <h6
                        style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
                    Code Backend Theme Gives You The Fully Modified Form View
                    with a Full Screen Experience. It will
                    Give You a Clean Layout with the New Color Combination
                    and a Modified Font.
                </h6>
                <div class="row mt-4">
                    <div class="col-lg-6">
                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>Modified Form Style</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>Full Screen Form View</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>New Looks for Tabs</p>
                        </span>
                    </div>

                    <div class="col-lg-6">
                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>New Style for Required Field</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>New Chatter Style Under Form View</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>New Looks for Status Button</p>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/Form view.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>
    </div>
    <!-- END OF FEATURE -->

    <!-- TWO COLUMN BLOCK -->
    <div class="container" style="margin-top: 3rem;">
        <div class="row" style="margin: 2rem; ; min-width: 100% !important;">

            <div class="col-lg-8"
                 style="padding: 1rem 1rem 1rem 0rem !important;">
                <div class=" shadow"
                     style="background-color: #fff !important; border-top:  3px solid #556EE6 !important;  padding: 2.5rem 0rem 0rem 0rem !important;">
                    <h3 class="mx-4 mt-3" style="font-weight: 700 !important;">
                        Overview</h3>
                    <h6 class="mx-4"
                        style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
                        Code Backend Theme V16 is an Attractive Theme for Your
                        Odoo 16.
                        This Theme Will Change Improve Your Experience With
                        Odoo.
                        This is a Minimalist and Elegant Backend Theme for Odoo
                        16 And Can Offer a Perfect Choice
                        for
                        Your Odoo Backend.
                    </h6>
                    <div class="mx-4 my-4">
                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>Modified Structure for All Type Views</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>New Style for Active Menus, Radio Buttons and Checkboxes</p>
                        </span>
                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>New Color Combination</p>
                        </span>

                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>New Look for All Applications</p>
                        </span>
                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>A Clean layout and New Font Style</p>
                        </span>
                        <span class="d-flex">
                            <i class="fa fa-check-square mr-2"
                               style="color:#556EE6 !important; margin-top: 5px !important;"></i>
                            <p>Sidebar with New Menu Icons</p>
                        </span>

                    </div>
                    <img src="./assets/all_screens.png" class="img-responsive"
                         width="100% !important"
                         height="auto !important">
                </div>
            </div>

            <div class="col-lg-4"
                 style="padding: 1rem 0rem 1rem 1rem!important;">
                <div class="shadow"
                     style="background-color: #fff !important; border-top:  3px solid #556EE6 !important; padding: 2.5rem 0rem 0rem 1.5rem !important; position: relative; overflow: hidden !important;">
                    <div class="text-center"
                         style="font-size: 0.9rem !important; background-color: #556EE6 !important; padding: 0.5 1.5rem !important; width: 60px; color: #ffffff !important; font-weight: 700; border-radius: 0.2rem !important; margin: 10px 0 !important;">
                        New
                    </div>
                    <h3 class="mt-3" style="font-weight: 700 !important;">
                        All-New Menu Design</h3>

                    <h6
                            style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important; padding-bottom: 3.8rem !important;">
                        The All-New Menu Design is Main Attractive Section for
                        the Code Backend Theme. The Sidebar
                        have New Minimalist
                        Icons for Applications in Odoo. Also the Sidebar Have
                        Closing and Opening Option.
                        Customisable Logo Attached in Sidebar
                        That is Automatically Fetch Your Company Logo.
                    </h6>
                    <img src="./assets/menu_focus.png" class="img-responsive"
                         width="100% !important"
                         height="auto !important">
                </div>
            </div>

        </div>
    </div>
    <!-- END OF TWO COLUMN BLOCK -->


    <!-- FEATURE -->
    <div class="container" style="margin-top: 3rem;">
        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
                <h3 style="font-weight: 700 !important;">Easily Access Sidebar
                    Menu</h3>
                <h6
                        style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
                    Reveal the sidebar menu with just a click. Sidebar menu
                    features all the relevant links to
                    navigate
                    through the application.
                    Hiding the sidebar leaves more space on the main area
                    offering a distraction-free view that lets
                    you
                    focus on what matters the most.
                </h6>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/easily-access-menu.gif" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>
    </div>
    <!-- END OF FEATURE -->

    <!-- SCREENSHOTS -->
    <div class="container" style="margin-top: 3rem;">
        <div class="row">
            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">

                <h2
                        style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
                    Screenshots</h2>
            </div>
        </div>

        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            1</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Login Page</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/login.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>

        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            2</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Group By View</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/2.groupbyview.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>

        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            3</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Settings Page</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/3.settings page.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>

        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            4</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Discuss Page</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/4.discusspage.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>

        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            5</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Product Kanban View</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/5.productskanaban.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>

        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            6</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Purchase List View</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/6.purchase view.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>

        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            7</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Product View with Smart Buttons</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/7.productviewsmartbuttons.png"
                     width="100%" height="auto"
                     class="img-responsive">
            </div>
        </div>
        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            8</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Modified Alert Notifications are
                        Placed on the Right Bottom of Display
                    </h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/8error.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>

        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            9</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Wizards and User Error Popups</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/modal.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>

        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            10</h6>
                    </div>
                    <h6 class="mt-2 ml-2">New Looks for The Tabs</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/10.newlookoftabs.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>

        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            11</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Recruitment Kanban View With
                        Ribbons</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/11.recruitment.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>
        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            12</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Sales Kanban View</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/12.saleskanban.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>

        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            13</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Modified Kanban View for Employees
                        With New Designed Category Section</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/13.modified kanban employee.png"
                     width="100%" height="auto"
                     class="img-responsive">
            </div>
        </div>


        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            14</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Sidebar with List View</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/15.sidebarwithlistview.png"
                     width="100%" height="auto"
                     class="img-responsive">
            </div>
        </div>


        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            15</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Attendance Pages</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/17.attendanceview.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>

        <div class="row shadow"
             style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
                <div class="d-flex my-3">
                    <div class="d-flex justify-content-center align-items-center"
                         style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
                        <h6 style="margin-top: 0.3rem; color: #fff !important;">
                            16</h6>
                    </div>
                    <h6 class="mt-2 ml-2">Graphs with Sidebar</h6>
                </div>
            </div>
            <div class="col-lg-12"
                 style="padding-left: 0 !important; padding-right: 0!important;">
                <img src="assets/screenshots/16grapghview.png" width="100%"
                     height="auto" class="img-responsive">
            </div>
        </div>
    </div>

    <!-- END OF SCREENSHOTS -->

    <!-- OUR SERVICES -->
    <section class="container" style="margin-top: 6rem !important;">
        <div class="row">
            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mb-4">

                <h2
                        style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
                    Our Services</h2>
            </div>

            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
                     style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
                    <img src="assets/icons/cogs.png" class="img-responsive"
                         height="48px" width="48px">
                </div>
                <h6 class="text-center"
                    style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
                    Odoo
                    Customization</h6>
            </div>

            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
                     style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
                    <img src="assets/icons/wrench.png" class="img-responsive"
                         height="48px" width="48px">
                </div>
                <h6 class="text-center"
                    style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
                    Odoo
                    Implementation</h6>
            </div>

            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
                     style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
                    <img src="assets/icons/lifebuoy.png" class="img-responsive"
                         height="48px" width="48px">
                </div>
                <h6 class="text-center"
                    style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
                    Odoo
                    Support</h6>
            </div>

            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
                     style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
                    <img src="assets/icons/user.png" class="img-responsive"
                         height="48px" width="48px">
                </div>
                <h6 class="text-center"
                    style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
                    Hire
                    Odoo
                    Developer</h6>
            </div>

            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
                     style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
                    <img src="assets/icons/puzzle.png" class="img-responsive"
                         height="48px" width="48px">
                </div>
                <h6 class="text-center"
                    style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
                    Odoo
                    Integration</h6>
            </div>

            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
                     style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
                    <img src="assets/icons/update.png" class="img-responsive"
                         height="48px" width="48px">
                </div>
                <h6 class="text-center"
                    style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
                    Odoo
                    Migration</h6>
            </div>

            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
                     style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
                    <img src="assets/icons/consultation.png"
                         class="img-responsive" height="48px" width="48px">
                </div>
                <h6 class="text-center"
                    style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
                    Odoo
                    Consultancy</h6>
            </div>

            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
                     style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
                    <img src="assets/icons/training.png" class="img-responsive"
                         height="48px" width="48px">
                </div>
                <h6 class="text-center"
                    style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
                    Odoo
                    Implementation</h6>
            </div>

            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
                     style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
                    <img src="assets/icons/license.png" class="img-responsive"
                         height="48px" width="48px">
                </div>
                <h6 class="text-center"
                    style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
                    Odoo
                    Licensing Consultancy</h6>
            </div>
        </div>
    </section>
    <!-- END OF END OF OUR SERVICES -->

    <!-- OUR INDUSTRIES -->
    <section class="container"
             style="margin-top: 6rem !important; background-color: #fff !important;">
        <div class="row">
            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mb-4">

                <h2
                        style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
                    Our Industries</h2>
            </div>

            <div class="col-lg-3">
                <div class="my-4 d-flex flex-column justify-content-center"
                     style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
                    <img src="./assets/icons/trading-black.png"
                         class="img-responsive mb-3" height="48px" width="48px">
                    <h5
                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
                        Trading
                    </h5>
                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
                        Easily
                        procure
                        and
                        sell your products</p>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="my-4 d-flex flex-column justify-content-center"
                     style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
                    <img src="./assets/icons/pos-black.png"
                         class="img-responsive mb-3" height="48px" width="48px">
                    <h5
                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
                        POS
                    </h5>
                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
                        Easy
                        configuration
                        and convivial experience</p>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="my-4 d-flex flex-column justify-content-center"
                     style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
                    <img src="./assets/icons/education-black.png"
                         class="img-responsive mb-3" height="48px"
                         width="48px">
                    <h5
                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
                        Education
                    </h5>
                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
                        A
                        platform for
                        educational management</p>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="my-4 d-flex flex-column justify-content-center"
                     style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
                    <img src="./assets/icons/manufacturing-black.png"
                         class="img-responsive mb-3" height="48px"
                         width="48px">
                    <h5
                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
                        Manufacturing
                    </h5>
                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
                        Plan,
                        track and
                        schedule your operations</p>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="my-4 d-flex flex-column justify-content-center"
                     style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
                    <img src="./assets/icons/ecom-black.png"
                         class="img-responsive mb-3" height="48px" width="48px">
                    <h5
                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
                        E-commerce &amp; Website
                    </h5>
                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
                        Mobile
                        friendly,
                        awe-inspiring product pages</p>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="my-4 d-flex flex-column justify-content-center"
                     style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
                    <img src="./assets/icons/service-black.png"
                         class="img-responsive mb-3" height="48px" width="48px">
                    <h5
                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
                        Service Management
                    </h5>
                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
                        Keep
                        track of
                        services and invoice</p>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="my-4 d-flex flex-column justify-content-center"
                     style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
                    <img src="./assets/icons/restaurant-black.png"
                         class="img-responsive mb-3" height="48px"
                         width="48px">
                    <h5
                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
                        Restaurant
                    </h5>
                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
                        Run
                        your bar or
                        restaurant methodically</p>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="my-4 d-flex flex-column justify-content-center"
                     style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
                    <img src="./assets/icons/hotel-black.png"
                         class="img-responsive mb-3" height="48px" width="48px">
                    <h5
                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
                        Hotel Management
                    </h5>
                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
                        An
                        all-inclusive
                        hotel management application</p>
                </div>
            </div>
        </div>
    </section>

    <!-- END OF END OF OUR INDUSTRIES -->

    <!-- FOOTER -->
    <!-- Footer Section -->
    <section class="container"
             style="margin: 5rem auto 2rem; background-color: #fff !important;">
        <div class="row" style="max-width:1540px;">
            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mb-4">

                <h2
                        style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
                    Need Help?</h2>
            </div>
        </div>
        <!-- Contact Cards -->
        <div class="row d-flex justify-content-center align-items-center"
             style="max-width:1540px; margin: 0 auto 2rem auto;">
            <div class="col-lg-12"
                 style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">
                <div class="row mt-4">
                    <div class="col-lg-6">
                        <a href="mailto:odoo@cybrosys.com" target="_blank"
                           class="btn btn-block mb-2 deep_hover"
                           style="text-decoration: none;  background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
                                class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a>
                    </div>
                    <div class="col-lg-6">
                        <a href="https://api.whatsapp.com/send?phone=918606827707"
                           target="_blank"
                           class="btn btn-block mb-2 deep_hover"
                           style="text-decoration: none;  background-color: #25D366; color: #FFF;  border-radius: 4px;">
                            <i class="fa fa-whatsapp mr-2"></i>+91 86068
                            27707</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Contact Cards -->
    </section>
    <!-- Footer -->
    <section class="oe_container"
             style="padding: 2rem 3rem 1rem; background-color: #fff !important;">
        <div class="row"
             style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
            <!-- Logo -->
            <div class="col-lg-12 d-flex justify-content-center align-items-center"
                 style="margin-top: 3rem;">
                <img src="https://www.cybrosys.com/images/logo.png"
                     width="200px" height="auto"/>
            </div>
            <!-- End of Logo -->
        </div>
    </section>
    <!-- END OF FOOTER -->
</div>
